<template>
  <div>
    <el-card class="!border-none" body-style="padding: 20px" shadow="never">
      <el-form
        ref="formRef"
        class="mb-[-16px]"
        :model="queryParams"
        :inline="true"
      >
        <el-form-item>
          <el-input
            class="w-[280px]"
            v-model="queryParams.keyword"
            placeholder="学号/学生姓名"
            clearable
            @keyup.enter="resetPage"
          />
        </el-form-item>

        <el-form-item>
          <el-input
            class="w-[280px]"
            v-model="queryParams.phone"
            placeholder="联系方式"
            clearable
          />
        </el-form-item>

        <el-form-item>
          <el-select placeholder="账号状态" style="width: 280px" v-model="queryParams.status">
            <el-option label="启用" :value="1" />
            <el-option label="停用" :value="2" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="resetPage">查询</el-button>
          <el-button @click="resetParams">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="!border-none" shadow="never">
      <el-table
        stripe
        class="mt-2"
        size="large"
        v-loading="pager.loading"
        :data="pager.lists"
      >
        <el-table-column label="学号" prop="student_no" min-width="120" />
        <el-table-column label="姓名" prop="real_name" min-width="100" />
        <el-table-column label="使用值" prop="nickname" min-width="120">

          <template #default="{ row }"> 
            {{ row.user.balance }}
          </template>
        </el-table-column>
        <el-table-column label="机器人数量" prop="robot_num" min-width="110">
          <template #default="{ row }">
            <span>{{ row.user.robot_num }}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系方式" prop="email" min-width="140" />

        <el-table-column label="账号状态" min-width="160">
          <template #default="{ row }">
            <span style="color: #1abc9c" v-if="row.status == 1">• 启用</span>
            <span style="color: #f59a23" v-else>• 停用</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="created_at" min-width="180" />

        <el-table-column label="操作" min-width="80" fixed="right">
          <template #default="{ row }">
            <div class="flex items-center">
              
              <el-button
                class="custom-btn"
                plain
                type="primary"
                link
                @click="gotoDeatil(row)"
              > 
                详情
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex justify-end mt-4">
        <pagination
          v-model="pager"
          @change="getLists"
          background="red"
          layout="prev, pager, next, sizes"
        />
      </div>
    </el-card>
  </div>
</template>
<script lang="ts" setup name="consumerLists">
import { usePaging } from "@/hooks/usePaging";
import { getStudentList } from "@/api/consumer";
import { ClientMap } from "@/enums/appEnums";
const router = useRouter();

// 获取当前的url ?后面的参数
const route = useRoute();

const queryParams = reactive({
  teacher_id: route?.query?.id,
  keyword: "",
  phone: "",
  status: "",
});

const { pager, getLists, resetPage, resetParams } = usePaging({
  fetchFun: getStudentList,
  params: queryParams,
});

onActivated(() => {
  getLists();
});

onMounted(() => {
  getLists();
});

// 路由跳转
const gotoDeatil = (_data) => {
  router.push(`/user/student/detail?id=${_data?.id}`);
};
</script>

<style lang="scss" scoped></style>
